<!DOCTYPE HTML>
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>

<div id="container">
  <div id="hiddenDivContainer" aria-label="hiddenDivContainer">
    <div id="hiddenDiv" hidden>
      <div>
        <button>Button</button>
      </div>
    </div>
  </div>

  <div id="invisibleDivContainer" aria-label="invisibleDivContainer">
    <div id="invisibleDiv" style="visibility: hidden">
      <div>
        <button>Button</button>
      </div>
    </div>
  </div>

  <div id="emptyDivContainer" aria-label="emptyDivContainer">
    <div id="emptyDiv"></div>
  </div>

  <div id="divWithoutRoleContainer" aria-label="divWithoutRoleContainer">
    <div id="divWithoutRole">
      <div>
        <button>Button</button>
      </div>
    </div>
  </div>

</div>

<div id="console"></div>
<script>
async_test((t) => {
    window.setTimeout(() => { assert_unreached("Did not receive all notifications within 1000ms"); }, 1000);

    function accessibleElementById(id) {
        return accessibilityController.accessibleElementById(id);
    }

    window.pendingSuccesses = new Set([
        'hiddenDivContainer',
        'invisibleDivContainer',
        'emptyDiv',
        'divWithoutRoleContainer',
    ]);

    gotSuccessfulNotification = t.step_func((id) => {
        if (!pendingSuccesses.has(id))
            assert_unreached('Unexpected notification for ' + id);
        pendingSuccesses.delete(id);
        accessibleElementById(id).removeNotificationListener();

        if (pendingSuccesses.size == 0)
            t.done();
    });

    assert_true(accessibleElementById('hiddenDivContainer') != null);
    assert_true(accessibleElementById('hiddenDiv').isIgnored);

    accessibleElementById('hiddenDivContainer').addNotificationListener(t.step_func((notification) => {
        console.log('Got ' + notification + ' notification on hiddenDivContainer');
        assert_equals(accessibleElementById('hiddenDivContainer').childrenCount,
                      1);
        gotSuccessfulNotification('hiddenDivContainer');
    }));

    document.getElementById('hiddenDiv').hidden = false;

    assert_true(accessibleElementById('invisibleDivContainer') != null);
    assert_true(accessibleElementById('invisibleDiv').isIgnored);

    accessibleElementById('invisibleDivContainer').addNotificationListener(t.step_func((notification) => {
        console.log('Got ' + notification + ' notification on invisibleDivContainer');
        assert_equals(accessibleElementById('invisibleDivContainer').childrenCount, 1);
        gotSuccessfulNotification('invisibleDivContainer');
    }));
    document.getElementById('invisibleDiv').style.visibility = 'visible';

    assert_true(accessibleElementById('emptyDiv') != null);
    accessibleElementById('emptyDiv').addNotificationListener(t.step_func((notification) => {
        console.log('Got ' + notification + ' notification on emptyDiv');
        assert_equals(accessibleElementById('emptyDiv').childrenCount, 1);
        gotSuccessfulNotification('emptyDiv');
    }));

    document.getElementById('emptyDiv').innerText = 'Not empty anymore.';
    document.getElementById('emptyDiv').offsetLeft;

    assert_true(accessibleElementById('divWithoutRoleContainer') != null);
    accessibleElementById('divWithoutRoleContainer').addNotificationListener(t.step_func((notification) => {
        console.log('Got ' + notification + ' notification on divWithoutRoleContainer');
        assert_equals(accessibleElementById('divWithoutRoleContainer').childrenCount, 1);
        gotSuccessfulNotification('divWithoutRoleContainer');
    }));
    document.getElementById('divWithoutRole').setAttribute('role', 'heading');
}, "This test ensures that a change to accessibilityIsIgnored fires a children changed notification on the parent.");

</script>

</body>
</html>
